<template>
  <div class="table-container">
    <div class="table-title">工商业影响分析</div>
    <div class="formula-detail">
      <el-collapse class="formula-collapse" v-model="activeNames" accordion @change="handleChange">
        <el-collapse-item title="公式详情" name="1">
          <div class="formula">预测电费 = 预测电量 * 单价</div>
          <div class="formula">实际电费 = 实际电量 * 单价</div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :row-class-name="rowClassName"
      show-summary
    >
      <el-table-column prop="project" label="项目" width="150" />
      <el-table-column prop="level" label="电压等级" width="150" />
      <el-table-column prop="electric" label="电量" width="150">
        <template #default="scope">
          <el-input size="small" v-model="scope.row.electric"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="average" label="代理购电均价含线损" width="150">
        <template #default="scope">
          <el-input size="small" v-model="scope.row.average"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="trans" label="输配电价" width="150"></el-table-column>
      <el-table-column prop="get_price" label="到户电价" width="150"></el-table-column>
      <el-table-column prop="origin" label="原目录价" width="150"></el-table-column>
      <el-table-column prop="diff" label="到户价差" width="150"></el-table-column>
      <el-table-column prop="purchase_price" label="原购销差" width="150"></el-table-column>
      <el-table-column prop="purchase" label="输配-网间-购销" width="150"></el-table-column>
      <el-table-column prop="purchase_diff" label="代理购电差价" width="150"></el-table-column>

      <el-table-column label="影响金额">
        <el-table-column prop="total" label="合计" width="120"></el-table-column>
        <el-table-column prop="power_station" label="国网/发电厂" width="120"></el-table-column>
        <el-table-column label="地方电网" width="120">
          <el-table-column prop="min_total" label="小计" width="120"></el-table-column>
          <el-table-column prop="proxy_price" label="代理购电" width="120"></el-table-column>
          <el-table-column prop="shu_price" label="输配电价" width="120"></el-table-column>
          <el-table-column prop="market" label="市场化" width="120"></el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'Analysis',
  inheritAttrs: false,
});

const tableData = reactive([
  {
    project: '实际数-单一制',
    level: '不满1千伏',
    electric: '',
    average: '',
    trans: '',
    get_price: '',
    origin: '',
    diff: '',
    purchase_price: '',
    purchase: '',
    purchase_diff: '',
    total: '',
    power_station: '',
    min_total: '',
    proxy_price: '',
    shu_price: '',
    market: '',
  },
  {
    project: '实际数-单一制',
    level: '1-10千伏',
    electric: '',
    average: '',
    trans: '',
    get_price: '',
    origin: '',
    diff: '',
    purchase_price: '',
    purchase: '',
    purchase_diff: '',
    total: '',
    power_station: '',
    min_total: '',
    proxy_price: '',
    shu_price: '',
    market: '',
  },
  {
    project: '实际数-单一制',
    level: '35千伏',
    electric: '',
    average: '',
    trans: '',
    get_price: '',
    origin: '',
    diff: '',
    purchase_price: '',
    purchase: '',
    purchase_diff: '',
    total: '',
    power_station: '',
    min_total: '',
    proxy_price: '',
    shu_price: '',
    market: '',
  },
  {
    project: '实际数-单一制',
    level: '小计',
    electric: '',
    average: '',
    trans: '',
    get_price: '',
    origin: '',
    diff: '',
    purchase_price: '',
    purchase: '',
    purchase_diff: '',
    total: '',
    power_station: '',
    min_total: '',
    proxy_price: '',
    shu_price: '',
    market: '',
  },
  {
    project: '实际数-两部制',
    level: '1-10千伏',
    electric: '',
    average: '',
    trans: '',
    get_price: '',
    origin: '',
    diff: '',
    purchase_price: '',
    purchase: '',
    purchase_diff: '',
    total: '',
    power_station: '',
    min_total: '',
    proxy_price: '',
    shu_price: '',
    market: '',
  },
  {
    project: '实际数-两部制',
    level: '35千伏',
    electric: '',
    average: '',
    trans: '',
    get_price: '',
    origin: '',
    diff: '',
    purchase_price: '',
    purchase: '',
    purchase_diff: '',
    total: '',
    power_station: '',
    min_total: '',
    proxy_price: '',
    shu_price: '',
    market: '',
  },
  {
    project: '实际数-两部制',
    level: '110千伏',
    electric: '',
    average: '',
    trans: '',
    get_price: '',
    origin: '',
    diff: '',
    purchase_price: '',
    purchase: '',
    purchase_diff: '',
    total: '',
    power_station: '',
    min_total: '',
    proxy_price: '',
    shu_price: '',
    market: '',
  },
  {
    project: '实际数-两部制',
    level: '220千伏',
    electric: '',
    average: '',
    trans: '',
    get_price: '',
    origin: '',
    diff: '',
    purchase_price: '',
    purchase: '',
    purchase_diff: '',
    total: '',
    power_station: '',
    min_total: '',
    proxy_price: '',
    shu_price: '',
    market: '',
  },
  {
    project: '实际数-两部制',
    level: '小计',
    electric: '',
    average: '',
    trans: '',
    get_price: '',
    origin: '',
    diff: '',
    purchase_price: '',
    purchase: '',
    purchase_diff: '',
    total: '',
    power_station: '',
    min_total: '',
    proxy_price: '',
    shu_price: '',
    market: '',
  },
]);

const activeNames = ref('1');
const handleChange = (val: any) => {};

const rowClassName = ({ row, rowIndex }: { row: any; rowIndex: any }) => {
  if (row.level === '小计') {
    return 'warning-row';
  } else if (rowIndex === 3) {
    return 'success-row';
  }
  return '';
};
</script>

<style lang="scss" scoped>
.el-table :deep(.warning-row) {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table :deep(.success-row) {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
.formula-detail {
  display: flex;
  justify-content: flex-end;
}
.formula-collapse {
  max-width: 100%;
  border-radius: 10px;
  background-color: #ffffff;
  padding-left: 10px;

  :deep(.el-collapse-item__header) {
    color: #4080ff;
    background-color: transparent;
  }
}
.formula {
  padding: 5px;
}
</style>